<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:gdmt="">
<head>
    <meta charset="UTF-8">
    <title th:text="#{organ.page.tile}"></title>
</head>
<body>
<div th:replace="common/common::html"></div>

<!--头部工具栏-->
<div>
    <a class="btn" href="#" onclick="addBtn();">
        <i class="glyphicon glyphicon-plus"></i>
        <span th:text="#{common.add}"></span>
    </a>
    <a href="#" class="btn" onclick="deleteBtn();">
        <i class="fa fa-trash-o"></i>
        <span th:text="#{common.delete}"> </span>
    </a>
    <a href="#" class="btn" onclick="updateBtn();">
        <i class="glyphicon glyphicon-edit"></i>
        <span th:text="#{common.modify}"></span>
    </a>

</div>

<div id="dialog-id"></div>
<div id="add-duty-dialog-id" style="display: none">
    <form id="add-duty-form-id" th:action="@{dutyAdd}" method="post">
        <span th:text="#{organ.name}"></span>
        <input type="text" id="add-duty-name" th:placeholder="#{organ.name}"><br>
    </form>
</div>

<div id="update-duty-dialog-id" style="display: none">
    <form id="update-duty-form-id" th:action="@{dutyUpdate}" method="post">
        <span th:text="#{organ.name}"></span>
        <input type="text" id="update-duty-name" th:placeholder="#{organ.name}"><br>
        <span th:text="#{organ.description}"></span>
        <input type="text" id="update-organ-name" th:placeholder="#{organ.description}">
    </form>
</div>

<div  id="duty-detail-dialog-id" style="display: none">
    <div>
        <span th:text="#{organ.name}"></span>:
        <span id="detail-duty-name-id"></span>
    </div>
    <div>
        <span th:text="#{organ.modTime}"></span>:
        <span id="detail-duty-organName-id"></span>
    </div>
</div>

<!--绑定对话框-->
<div id="bound-menu-dialog-id" style="display: none">
    <ul id="bound-menu-ztree-id" class="ztree"></ul>
</div>

<!--表单-->
<table  id="flexigrid-id"></table>

<div>
    <a href="#" class="btn" onclick="boundMenuInfo();">
        <i class="fa fa-chain-broken"></i>
        <span th:text="#{common.bound}"></span>
    </a>
    <a href="#" class="btn" onclick="unboundMenuInfo();">
        <i class="fa fa-unlock"></i>
        <span th:text="#{common.unbound}"></span>
    </a>
    <nav>
        <span th:text="#{organ.page.tile}"></span>
        <ul id="menu-left-tree-ul-id" class="ztree" ></ul>
    </nav>
    <article style="flex-grow: 1">
        <form id="modify-menu-info-form-id" th:action="@{/organ/organUpdate}"
              method="post">
            <fieldset >
                <legend>
                    <span th:text="#{common.base}"></span>
                </legend>
                <div class="form-tow-column">
                    <div class="form-group">
                        <span for="mod-menu-id" th:text="#{organ.Uuid}"> </span>
                        <input name="organUuid" id="mod-menu-id" class="form-control" readonly >
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-name-id" th:text="#{organ.name}"></span>
                        <input name="organName" id="mod-menu-name-id" class="form-control" regex="^.{1,50}$" tip="input 1 to 50 char">
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-type-id" th:text="#{organ.modTime}"> </span>
                        <input class="form-control" id="mod-menu-type-id" name="modTime"></select>
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-type-id" th:text="#{organ.description}"></span>
                        <input class="form-control" id="mod-menu-level-id" name="description">
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-url-id" th:text="#{organ.parentUuid}"> </span>
                        <input name="parentUuid" id="mod-menu-url-id" class="form-control">
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-privilege-code-id" th:text="#{organ.delete.flag}"> </span>
                        <input name="delFlag" id="mod-menu-privilege-code-id" class="form-control">
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-icon-id" th:text="#{organ.modfierId}"></span>
                        <input name="ModifierId" id="mod-menu-icon-id" class="form-control">
                    </div>
                    <div class="form-group">
                        <span for="mod-menu-http-id" th:text="#{menu.menu.http}"> </span>
                        <select gdmt:dicselect="menu.https" class="form-control" id="mod-menu-http-id" name="isHttps" value="0"></select>
                    </div>
                </div>
            </fieldset>
        </form>
    </article>
</div>

</body>
<script th:inline="javascript" >
    //页面
    var _gridWidth;
    var _gridHeight;

    //页面自适应
    function resizePageSize(){
        _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
        _gridHeight = $(document).height()-32-140; /* -32 顶部主菜单高度，   -90 查询条件高度*/
    }
    $(function() {
        leftMenuLoad();
        //初始化用户表格
        resizePageSize();
        var _columnWidth = _gridWidth/4;
        $("#flexigrid-id").flexigrid({
            width : _gridWidth,
            height : _gridHeight,
            url : /*[[@{/organ/queryOrganListPage}]]*/"",
            dataType : 'json',
            colModel : [
                {display : /*[[#{organ.Uuid}]]*/"",name : 'organUuid',width : _columnWidth, sortable : true,align : 'center'},
                {display : /*[[#{organ.name}]]*/"",name : 'organName',width : _columnWidth, sortable : true,align : 'center'},
                {display : /*[[#{organ.modTime}]]*/"",name : 'modTime',width : _columnWidth, sortable : true,align : 'center'},
                {display : /*[[#{organ.description}]]*/"",name : 'description',width : _columnWidth, sortable : true,align : 'center'},
            ],
            resizable : false, //resizable table是否可伸缩
            useRp : true,
            usepager : true, //是否分页
            autoload : false, //自动加载，即第一次发起ajax请求
            hideOnSubmit : true, //是否在回调时显示遮盖
            showcheckbox : true, //是否显示多选框
            rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
            rowbinddata : true
        });

        $("#flexigrid-id").flexReload();

        // 增加岗位
        $("#add-duty-dialog-id").click(function (event) {
            event.stopPropagation();
            addBtn();
        });

        $("#add-duty-dialog-id").dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,
            title: /*[[#{duty.add}]]*/'',
            buttons: [
                {
                    text: /*[[#{common.confirm}]]*/'',
                    click: function () {
                        var organName = document.getElementById("add-duty-name").value;
                        $.ajax({
                            type: 'post',
                            async: false,
                            dataType: 'json',
                            url: /*[[@{/organ/organAdd}]]*/'',
                            data: [
                                {name: "organName", value: organName},
                            ],
                            success: function (data) {
                                message(data.msg);
                                $("#add-duty-dialog-id").dialog('close');
                                $("#flexigrid-id").flexReload();
                            },
                            error: function (msg) {
                                message(/*[[#{common.error}]]*/'');
                            }
                        });
                    }
                },
                {
                    text: /*[[#{common.cancel}]]*/'',
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            ]
        });

        //修改菜单信息表单
        $("#modify-menu-info-form-id").ajaxForm({
            dataType: "json",
            success : function(data) {
                message(data.msg);
                leftMenuLoad();
            },
            error : function() {
                message(/*[[#{common.error}]]*/'');
            },
            complete : function(response, status) {

            }
        });

        $("#duty-detail-dialog-id").dialog({
            autoOpen : false,
            width : 400,
            modal : true,
            resizable : false,
            title: /*[[#{organ.info}]]*/'',
            buttons: [
                {
                    text: /*[[#{common.confirm}]]*/'',
                    click: function() {
                        $( this ).dialog( "close" );
                    }
                }
            ]
        });



    });//ready

    // 增加角色
    function addBtn() {
        $("#add-duty-dialog-id").dialog('open');
    }
    // 删除角色
    function deleteBtn() {
        var organUuid = $("#flexigrid-id").flexiData();
        if(organUuid == null || "" === organUuid){
            return;
        }
        $.ajax({
            type: 'post',
            async: false,
            dataType : 'json',
            url: /*[[@{/organ/organDelete}]]*/"",
            data: [{name:"organUuid",value:organUuid}],
            success: function (data) {
                message(data);
                $("#modify-menu-info-form-id").resetForm();
                leftMenuLoad();
            },
            error: function(msg){
                message(/*[[#{common.error}]]*/'');
            }
        });
    }

    // 修改角色信息
    $("#update-duty-dialog-id").click(function (event) {
        event.stopPropagation();
        updateBtn();
    });
    $("#update-duty-dialog-id").dialog({
        autoOpen: false,
        width: 400,
        modal: true,
        resizable: false,
        title: /*[[#{organ.update}]]*/'',
        buttons: [
            {
                text: /*[[#{common.confirm}]]*/'',
                click: function () {
                    var organUuid =$("#flexigrid-id").flexiData();
                    var organName = document.getElementById("update-duty-name").value;
                    var description = document.getElementById("update-organ-name").value;
                    $.ajax({
                        type: 'post',
                        async: false,
                        dataType: 'json',
                        url: /*[[@{/organ/organUpdate}]]*/'',
                        data: [{name: "organUuid", value: organUuid},
                            {name: "organName", value: organName},
                            {name: "description", value: description}],
                        success: function (data) {
                            message(data.msg);
                            $("#update-duty-dialog-id").dialog('close');
                            $("#flexigrid-id").flexReload();
                        },
                        error: function (msg) {
                            message(/*[[#{common.error}]]*/'');
                        }
                    });
                }
            },
            {
                text: /*[[#{common.cancel}]]*/'',
                click: function () {
                    $(this).dialog("close");
                }
            }
        ]
    });
    // 修改角色
    function updateBtn() {
        var ids = $("#flexigrid-id").flexiData();
        if (ids.length !== 1) {
            message(/*[[#{common.select.one}]]*/'');
            return;
        }
        $("#update-duty-dialog-id").dialog('open');
    }

    function rowDbclick(r){
        $(r).dblclick(
            function() {
                var columnsArray = $(r).attr('ch').split("_FG$SP_");
                console.info(columnsArray);
                $("#detail-duty-name-id").text(columnsArray[1]);
                $("#detail-duty-organName-id").text(columnsArray[5]);
                $("#detail-duty-roleName-id").text(columnsArray[4]);
                $("#duty-detail-dialog-id").dialog("open");
            });
    }
    //菜单树

    var leftMenuSetting = {
        check: {
            enable: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback : {
            onClick : onClickNode
        }
    };

    function leftMenuLoad() {
        $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: '/ljx/duty/getMenuTree',
                data: [],
                success: function (data) {
                    $.fn.zTree.init($("#menu-left-tree-ul-id"), leftMenuSetting, data);
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            }
        );
    }
    //ztree回调事件
    function onClickNode(event, treeId, treeNode){
        //console.info(treeNode.id);
        $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/organ/getOrganInfoByUuid}]]*/'',
                data: [{name:"organUuid",value:treeNode.id}],
                success: function (data) {
                    var dom = $("#modify-menu-info-form-id .form-control");
                    dom.each(function(index,item) {
                        var nameAttr = $(item).attr("name");
                        // console.info(data[nameAttr]);
                        $(item).val(data[nameAttr]);
                    });

                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            }
        );
    }


// 绑定Ztree样式
    var BoundMenuSetting = {
        check: {
            enable: true,
            chkStyle: "radio",
            radioType: "all"
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };

    // 绑定对话框初始化
    $("#bound-menu-dialog-id").dialog({
        autoOpen : false,
        width : 400,
        height:400,
        modal : true,
        resizable : false,
        title: /*[[#{common.bound}]]*/'',
        buttons: [
            {
                text: /*[[#{common.confirm}]]*/'"></spring:message>',
                click: function() {
                    var parentId = "";
                    var ztreeObj = $.fn.zTree.getZTreeObj("bound-menu-ztree-id");
                    var nodes = ztreeObj.getCheckedNodes(true);
                    $(nodes).each(function (index,item) {
                        parentId =item.id;
                    });
                    var menuId = $("#mod-menu-id").val();

                    $.ajax({
                        type: 'post',
                        async: false,
                        dataType : 'json',
                        url: /*[[@{/organ/boundOrgan }]]*/'',
                        data: [
                            {name:"parentUuid",value:parentId},
                            {name:"organUuid",value:menuId}
                        ],
                        success: function (data) {
                            message(data.msg);
                            $("#bound-menu-dialog-id").dialog('close');
                            leftMenuLoad();
                        },
                        error: function(msg){
                            message(/*[[#{common.error}]]*/'');
                        }
                    });
                }
            },
            {
                text: /*[[#{common.cancel}]]*/'',
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });
// 菜单绑定函数
    function boundMenuInfo () {
        $("#bound-menu-dialog-id").dialog('open');
        var modMenuId = $("#mod-menu-id").val();
        if(modMenuId == null || '' === modMenuId){
            return;
        }
        $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/organ/getOrganTreeByOrganUuid }]]*/'',
                data: [{name:"organUuid",value:modMenuId}],
                success: function (data) {
                    $.fn.zTree.init($("#bound-menu-ztree-id"), BoundMenuSetting, data);
                    var ztreeObj = $.fn.zTree.getZTreeObj("bound-menu-ztree-id");
                    var nodes = ztreeObj.getNodesByParam("id",modMenuId,null);
                    ztreeObj.removeNode(nodes[0]);
                    $("#bound-menu-dialog-id").dialog('open');

                },
                error: function(msg){
                    message(/*#{common.error}*/'');
                }
            }
        );
    }

    //解绑
    function unboundMenuInfo() {
        var modMenuId = $("#mod-menu-id").val();
        if(modMenuId == null || '' === modMenuId){
            return;
        }
        $.ajax({
            type: 'post',
            async: false,
            dataType : 'json',
            url: /*[[@{/organ/unBoundByOrganUuid}]]*/'',
            data: [{name:"organUuid",value:modMenuId}],
            success: function (data) {
                leftMenuLoad();
                message(data.msg);
            },
            error: function(msg){
                message(/*[[#{common.error}]]*/'');
            }
        });
    }



</script>

</html>

